<!-- 最前排名 -->

<template>
  <EasyRow :col2="top === 10" :col3="top === 15" class="SecureTopRank full">
    <div class="full">
      <div v-for="(item, i) in info.rank.slice(0, 5)" :key="i" class="flexCC">
        <div class="flex1" :class="{ 'SecureTopRank-circle': i > 2 }">
          <img v-if="i < 3" :src="rankImgs[i]" />
          <span v-else>{{ item[0] }}</span>
        </div>
        <div class="flex2 ellips">{{ item[1] }}</div>
        <div class="flex3"><div :style="`width: ${(item[2] * 100) / info.rank[0][2]}%`" /></div>
        <div class="flex2">{{ item[2] }} 次</div>
      </div>
    </div>

    <div v-if="top > 5" class="full">
      <div v-for="(item, i) in info.rank.slice(5, 10)" :key="i" class="flexCC">
        <div class="flex1 SecureTopRank-circle">
          <span>{{ item[0] }}</span>
        </div>
        <div class="flex2 ellips">{{ item[1] }}</div>
        <div class="flex3"><div :style="`width: ${(item[2] * 100) / info.rank[0][2]}%`" /></div>
        <div class="flex2">{{ item[2] }} 次</div>
      </div>
    </div>

    <div v-if="top > 10" class="full">
      <div v-for="(item, i) in info.rank.slice(10, 15)" :key="i" class="flexCC">
        <div class="flex1 SecureTopRank-circle">
          <span>{{ item[0] }}</span>
        </div>
        <div class="flex2 ellips">{{ item[1] }}</div>
        <div class="flex3"><div :style="`width: ${(item[2] * 100) / info.rank[0][2]}%`" /></div>
        <div class="flex2">{{ item[2] }} 次</div>
      </div>
    </div>

    <el-empty v-if="readyInfo && !info.rank.length" :description="empty" />
  </EasyRow>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

const getImg = (name) => CORE.common(`${name}.png`)

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'TopRank',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixInfo()],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 排名图片
     */
    rankImgs() {
      return [getImg('rank1'), getImg('rank2'), getImg('rank3')]
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
